<template>
  <div>
    <div v-if="showBreadcrumb" class="bread-box but20">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item class="btn-green" style=" color: #3DC094;" @click.native="handleBack">关联图纸</el-breadcrumb-item>
        <el-breadcrumb-item>详情</el-breadcrumb-item>
      </el-breadcrumb>
      <div>
        <el-button size="mini" @click="handleBack">取消</el-button>
      </div>
    </div>
    <div v-if="pageFlag==='shopConfig'" class="qup-page-heade bread-box">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>图纸详情</el-breadcrumb-item>
      </el-breadcrumb>
      <div>
        <el-button size="mini" @click.native="backConfigDetail">返回</el-button>
      </div>
    </div>
    <c-log-tabs :source-id="shopConfigData.id || $route.query.id">
      <div class="shop-drawing-detail">
        <c-list :column="3" label-width="130px">
          <c-list-item label="图纸编码" :value="detail.picTaskCode" />
          <c-list-item label="图纸名称" :value="detail.picTaskName" />
          <c-list-item label="图纸类型" dict-type-code="PIC_TYPE" :value="detail.picType" />
          <c-list-item label="门店建设项目号" :value="detail.constCode" />
          <c-list-item label="所属门店编码" :value="detail.shopCode" />
          <c-list-item label="所属门店" :value="detail.shopName" />
          <c-list-item label="所属客户编码" :value="detail.clientCode" />
          <c-list-item label="所属客户" :value="detail.clientName" />
          <c-list-item label="所属办事处" :value="detail.officeName" />
          <c-list-item label="设计范围" dict-type-code="DECORATION_RANGE" :value="detail.designRange" />
          <c-list-item label="设计区域" :value="this.$getAreaName(detail.designSpace)" />
          <c-list-item label="设计业务类型" dict-type-code="BIZ_TYPE" :value="detail.designBizType" />
          <c-list-item label="装修形式" dict-type-code="DECORATION_FORM" :value="detail.decorationType" />
          <c-list-item label="图纸总面积" suffix="m²" :value="detail.picTotalArea || 0" />
          <c-list-item label="是否含成融定" dict-type-code="BOOLEANS" :value="detail.haveEAndC" />
          <c-list-item label="成融定面积" suffix="m²" :value="detail.eandCArea || 0" />
          <!-- 十月优化START -->
          <c-list-item label="软体区面积汇总" suffix="m²" :value="detail.softwareSumArea" />
          <c-list-item label="套房区面积汇总" suffix="m²" :value="detail.suiteSumArea" />
          <c-list-item label="新业务面积汇总" suffix="m²" :value="detail.newBusinessAreaSummary || 0" />
          <!-- 十月优化END -->
          <c-list-item label="预计设计完成时间" :value="detail.expectEndTime" />
          <c-list-item label="图纸紧急程度" dict-type-code="PIC_URGENT_LEVEL" :value="detail.picUrgentLevel" />
          <c-list-item label="是否KA卖场" dict-type-code="BOOLEANS" :value="detail.isKaMarket" />
          <c-list-item label="是否重点市场" dict-type-code="BOOLEANS" :value="detail.isFocusMarket" />
          <c-list-item label="店面等级" dict-type-code="SHOP_LEVEL_CODE" :value="detail.shopLevelCode" />
          <c-list-item label="是否含重复设计" dict-type-code="BOOLEANS" :value="detail.isRedesign" />
          <c-list-item label="重复设计原因" dict-type-code="REDESIGN_REASON" :value="detail.repeatDesignReason" />
          <c-list-item label="设计单位" :value="detail.designUnitName" />
          <c-list-item label="设计师" :value="detail.designerName" />
          <c-list-item label="图纸进度" dict-type-code="PIC_DESIGN_SCHEDULE" :value="detail.schedule" />
          <c-list-item label="图纸状态" dict-type-code="PIC_DESIGN_STATE" :value="detail.state" />
          <c-list-item label="图纸维护次数" :value="detail.maintainTimes" />
          <c-list-item label="暂停时间" :value="detail.stopTime" />
          <c-list-item label="预计恢复时间" :value="detail.expectRestoreTime" />
          <c-list-item label="实际恢复时间" :value="detail.actualRestoreTime" />
          <c-list-item label="是否超期未恢复" dict-type-code="BOOLEANS" :value="detail.isOverdueUnrestore" />
          <c-list-item label="出图明细任务状态" dict-type-code="OUTPIC_DETAIL_TASK_SCHEDULE" :value="detail.detailTaskSchedule" />
          <c-list-item label="经销商反馈修改时间" :value="detail.customerFeedbackUptime" />
          <c-list-item label="图纸设计是否超期" dict-type-code="BOOLEANS" :value="detail.isDesignOverdue" />
          <c-list-item label="超期时长（天）" :value="detail.overdueDay" />
          <c-list-item label="来源图纸" :value="detail.sourcePic">
            <div class="source-pic">
              <span v-for="(p,i) in ((detail.sourcePic||'').split(',')||[])" :key="i" @click="toSource(p)">{{ p }}</span>
            </div>
          </c-list-item>
          <!-- 十月优化START -->
          <c-list-item label="图纸下发时间" :format-time="false" :value="detail.drawingIssuanceTime" />
          <!-- 十月优化END -->
          <c-list-item label="启用状态" dict-type-code="BOOLEANS" :value="detail.enable" />
          <c-list-item label="创建人" :value="detail.createBy" />
          <c-list-item label="创建时间" :value="detail.createTime" />
          <c-list-item label="修改人" :value="detail.lastUpdateBy" />
          <c-list-item label="修改时间" :value="detail.lastUpdateTime" />
          <!-- 十月优化START -->
          <c-list-item label="经销商确认结果" zero="不同意" one="同意" :value="detail.customerConfirmResult" />
          <c-list-item label="经销商确认意见" :value="detail.customerFeedbackAdvice" />
          <c-list-item label="客户经理确认结果" zero="不同意商家确认结果" one="同意商家确认结果" :value="detail.managerReviewResult" />
          <c-list-item label="客户经理确认意见" :value="detail.managerReviewAdvice" />
          <!-- 十月优化END -->
        </c-list>
        <c-permission-tabs>
          <el-tab-pane label="出图明细" name="all">
            <c-permission-tabs>
              <el-tab-pane label="出图区域及系列" name="area">
                <AreaSeries :otc="detail.outpicDetailTaskCode" :detail="detail" />
              </el-tab-pane>
              <el-tab-pane label="出图品类及数量" name="category">
                <Category :otc="detail.outpicDetailTaskCode" />
              </el-tab-pane>
            </c-permission-tabs>
          </el-tab-pane>
          <el-tab-pane label="图纸附件管理" name="designing">
            <PicAtt is-detail :data="detail.designPictureMaintainDTOList" />
          </el-tab-pane>
        </c-permission-tabs>
      </div>
    </c-log-tabs>
  </div>
</template>
<script>
import { getPictureInfo } from '@/api/shopDrawing'
import AreaSeries from './components/AreaSeries'
import Category from './components/Category'
import PicAtt from './components/PicAtt'
import { getPath } from '@/views/shopDesignTask/getPath'
export default {
  name: 'Detail',
  components: {
    AreaSeries,
    Category,
    PicAtt
  },
  props: {
    shopConfigData: {
      type: Object,
      default: () => ({})
    },
    pageFlag: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      detail: {},
      showBreadcrumb: false
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    getDetail() {
      const id = this.shopConfigData.id || this.$route.query.id
      // const { id } = this.shopConfigData || this.$route.query
      if (this.$route.query.flag) {
        this.showBreadcrumb = true
      }
      getPictureInfo(id).then(res => {
        this.detail = res.data
      })
    },
    handleBack() {
      this.$store.dispatch('views/goBack')
    },
    backConfigDetail() {
      this.$emit('goBack', false)
    },
    async toSource(v) {
      const { path, query } = await getPath('DRAWING_TRIGGER', v)
      if (!path) return
      query ? query.time = new Date().getTime() : ''
      this.$store.dispatch('views/goPage', { path, query })
    }
  }
}
</script>
<style lang="scss" scoped>
.shop-drawing-detail{
  padding-top: 12px;
  .source-pic{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    &>span{
      color: #09C595;
      cursor: pointer;
      padding-right: 5px;
    }
  }
}
</style>
